<template>
	<view class="">
		<picker v-if="type=='vip'" mode="date" :value="data.date" @change="dateChange">
			<uv-form-item :label="item.fieldLabel" borderBottom>
				<uv-input :value="data.date" disabled disabledColor="#ffffff" :placeholder="`请选择${item.fieldLabel}`"
					border="none">
				</uv-input>
				<template v-slot:right>
					<uv-icon name="arrow-down-fill" color="#2C2C2C" size="8"></uv-icon>
				</template>
			</uv-form-item>
		</picker>
		<picker v-else mode="date" :value="data.date" @change="dateChange">
			<uv-form-item :required="item.isRequired" :label="item.fieldLabel" class="sex-b">
				<uv-input :value="data.date" disabled disabledColor="#ffffff" :placeholder="`请选择${item.fieldLabel}`">
				</uv-input>
				<template v-slot:right>
					<uv-icon class="arrow" name="arrow-down"></uv-icon>
				</template>
			</uv-form-item>
		</picker>
	</view>
</template>

<script setup>
	import {
		defineProps,
		ref,
		defineEmits,
		onMounted
	} from 'vue';
	const props = defineProps(['item', 'index', 'id', 'type']);
	const emit = defineEmits(['resValue']);
	const data = ref({
		date: '',
	})

	onMounted(() => {
		if (props.id) {
			data.value.date = props.item.resValue;
		}
	})
	const dateChange = (e) => {
		data.value.date = e.detail.value;
		emit('resValue', {
			index: props.index,
			value: data.value.date
		})
	};
</script>

<style lang="scss">
	// .form-box {
	// 	padding: 32rpx 38rpx;

	.sex-b {
		position: relative;

		.arrow {
			position: absolute;
			right: 0;
		}
	}

	// }
</style>